<template>
  <div class="container">
    <div class="header">
      <div class="title">水上桥区管控</div>
      <div class="menu">
        <div class="item" @click="router.push({ path: '/szsyBridgeIndex' })">总体概况</div>
        <div class="item active">桥区日常管理</div>
      </div>
    </div>
    <div class="main">
      <div class="left-content">
        <div class="title">桥梁信息</div>
        <div class="subtitle">
          <div class="name">基本信息</div>
          <div class="more" @click="baseInfoDialogVisible = true">更多</div>
        </div>
        <div class="image">
          <img :src="picUrl" v-if="picUrl" @error="imgError">
          <div class="no-image" v-else>
            <img src="../../assets/images/pc/error.png">
            <div class="name">暂无图片</div>      
          </div> 
          <div 
            class="btn"
            v-if="haveLink"
            @click="goLink"
          >
            三维
          </div>
        </div>
        <div class="base-info">
          <div class="left-info">
            <div class="name">{{ bridgeBaseInfoData.bridgeName || "--" }}</div>
            <div class="address">
              <img src="../../assets/images/pc/address-icon.png" alt="">
              <div>
                <span class="text">地理位置：</span>
                <span class="value">{{ bridgeBaseInfoData.cAddress || "--" }}</span>
              </div>
            </div>
          </div>
          <div class="right-info">
            <div class="name">净高是否达标：</div>
            <div 
              class="value"
              :style="bridgePortraitData?.isDabiao === '不达标' ? 'color:#F13939;':''"
            >
              {{ bridgePortraitData?.isDabiao || "--" }}
            </div>
          </div>
        </div> 
        <div class="subtitle">
          <div class="name">通航孔</div>
        </div>
        <div class="hole-info">
          <div class="hole-item">
            <div class="name">单向/双向通行</div>
            <div class="value" v-if="tonghangkong.length">
              {{ tonghangkong[0]?.tonghangkGz || "--" }}/{{ tonghangkong[1]?.tonghangkGz || "--" }}
            </div>
            <div class="value" v-else>--/--</div>
          </div>
          <div class="hole-item">
            <div class="name">通航孔数量</div>
            <div class="value">{{ bridgeHoleData.tonghangnum || "--" }}个</div>
          </div>
          <div class="hole-item">
            <div class="name">设计最高通航水位</div>
            <div class="value">{{ bridgeHoleData.shejizuigao || "--" }}m</div>
          </div>
          <div class="hole-item">
            <div class="name">实时通航净高</div>
            <div class="value">{{ bridgeHoleData.shicetongh || "--" }}m</div>
          </div>
        </div>
        <div class="count-info">
          <div class="count-item" style="width: 30%;margin-right: 2%;">
            <div class="top">
              <div class="name">桥区船舶密度</div>              
            </div>
            <div class="bottom">
              <div class="bottom-item">                
                <div class="name">上月船舶流量</div>
                <div class="value" style="color: #0051FF;">{{ density }}</div>
              </div>
            </div>
          </div>
          <div class="count-item" style="width: 68%;">
            <div class="top" style="justify-content: space-between;padding: 0 16px;">
              <div class="name">预警情况</div>  
              <div class="more" @click="() => { earlyWarningDialogVisible = true; yawStatisticsFn(); }">更多</div>  
            </div>
            <div class="bottom">
              <div class="bottom-item w33 br1">                
                <div class="name">超高统计</div>
                <div class="value">{{ chaogaoAlarm }}</div>
              </div>
              <div class="bottom-item w33 br1">                
                <div class="name">超速统计</div>
                <div class="value">{{ chaosuAlarm }}</div>
              </div>
              <div class="bottom-item w33">                
                <div class="name">偏航统计</div>
                <div class="value">{{ pianhangAlarm }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="subtitle">
          <div class="name">水位情况</div>
          <el-select
            v-model="water"
            placeholder="请选择" 
            size="small"  
            style="width: 200px;"          
          >
            <el-option
              v-for="item in waterOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
        <div class="water-info">
          <div class="water-level">实时水位：<span class="value">{{ newWaterData[0]? newWaterData[0].swz : "--" }}</span>米</div>
          <div class="tips">国家1985高程基准</div>
          <div class="update-time">更新时间：{{ newWaterData[0]? newWaterData[0].time : "--" }}</div>
        </div>
        <div class="blueprint">
          <div class="blueprint-item" @click="ElMessage.error('暂无图纸')" style="margin-right: 16px;">            
            <div class="name">
              <img src="../../assets/images/pc/sjtz-icon.png" alt="">
              <div>设计图纸</div>
            </div>
            <img src="../../assets/images/pc/more-icon.png" style="padding-right: 16px;">
          </div>
          <div class="blueprint-item" @click="planUrl?viewPlan():ElMessage.error('暂无方案')">           
            <div class="name">
              <img src="../../assets/images/pc/yqyfa-icon.png" alt="">
              <div> 一桥一方案</div>
            </div>
            <img src="../../assets/images/pc/more-icon.png" style="padding-right: 16px;">
          </div>
        </div>
      </div>
      <div class="middle-content">
        <div class="map">
          <OlArc ref="OlArcRef"></OlArc>
          <div class="choose">
            <el-select
              v-model="bridge"
              filterable
              placeholder="请选择"   
              @change="bridgeChange" 
              style="width: 200px;"              
            >
              <el-option
                v-for="item in bridgeOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select> 
          </div>
        </div>
        <div class="title">桥区航道</div>
        <div class="info">
          <div class="info-item" style="margin: 8px 16px 16px 16px;">
            <div class="item-title">
              <div class="name">基本信息</div>
              <div class="more" @click="channelBaseInfoDialogVisible = true">更多</div>
            </div>
            <div class="first-info">
              <div class="top">
                <div>{{ waterwayBaseInfoData.channelName || "--" }}</div>
                <div>{{ waterwayBaseInfoData.cWeihudj || "--" }}级</div>
              </div>
              <div class="bottom">
                <div>航标总数：<span class="value">{{ waterwayBaseInfoData.hbNum || "--" }}</span></div>
              </div>
            </div>
          </div>
          <div class="info-item" style="margin: 8px 16px 16px 0px;">
            <div class="item-title">
              <div class="name">维护情况</div>
            </div>
            <div class="second-info">
              <div>
                <div class="name">维护水深(m)</div>
                <div class="value">{{ waterwayBaseInfoData.weihuDeep || "--" }}</div>                
              </div>
              <div>
                <div class="name">维护宽度(m)</div>
                <div class="value">{{ waterwayBaseInfoData.weihuWeigth || "--" }}</div>                
              </div>
              <div>
                <div class="name">维护弯曲半径(m)</div>
                <div class="value">{{ waterwayBaseInfoData.wanquRadius || "--" }}</div>                
              </div>
            </div>
          </div>
          <div class="info-item" style="margin: 8px 0px 16px 0px;">
            <div class="item-title">
              <div class="name">水位情况</div>
              <div class="more" @click="openWaterLevelDialog">更多</div>
              <el-select
                v-model="water1"
                placeholder="请选择"   
                size="small"
                @change="getNewWaterFn1"
                style="width:120px;"                
              >
                <el-option
                  v-for="item in waterOptions1"
                  :key="item.point"
                  :label="item.point"
                  :value="item.point"
                />
              </el-select>
            </div>
            <div class="third-info">
              <div class="water-level">实时水位：{{ getNewWaterData?.swz }}米</div>
              <div class="tips">
                <div>国家1985高程基准</div>
                <div>更新时间：{{ getNewWaterData?.time || "--" }}</div>
              </div>
            </div>
          </div>
          <div class="info-item" style="margin: 0px 16px 16px 16px;">
            <div class="item-title">
              <div class="name">巡检情况</div>
              <div class="more" @click="routingInspectionDialogVisible = true">更多</div>
            </div>
            <div class="fourth-info">
              <div class="name">巡检里程数：</div>    
              <div class="value">{{ xcMile || "--" }}公里</div>                      
            </div>
          </div>
          <div class="info-item" style="margin: 0px 16px 16px 0px;">
            <div class="item-title">
              <div class="name">船舶流量</div>
              <div class="more" @click="hdCbllDetailFn">更多</div>
              <div class="point">观测点：{{ hdCbllData.name }}</div>
            </div>
            <div class="fifth-info">
              <div>
                <div class="name">3000吨以上船舶</div>
                <div class="value">{{ hdCbllData.dayu || "--" }}</div>                
              </div>
              <div>
                <div class="name">3000吨以下船舶</div>
                <div class="value">{{ hdCbllData.xiaoyu || "--" }}</div>                
              </div>
            </div>
          </div>
          <div class="info-item">
            <div class="item-title">
              <div class="name">关联桥梁</div>
              <div class="more" @click="associatedBridgeDialogVisible = true">更多</div>
            </div>
            <div class="sixth-info">
              <div class="value">{{ associationBgData.num || "--" }}座</div>
            </div>
          </div>
        </div>
        <div class="title">航道通告</div>
        <div class="notice-list">
          <template v-if="waterwayNoticeData.length">
            <div class="notice-item" v-for="(item,index) in waterwayNoticeData" :key="index" @click="seeNotice(item.contents)">
              {{ item.title }}
            </div>
          </template>
          <div class="no-list" v-else>暂无通告</div>
        </div>
      </div>
      <div class="right-content">
        <div class="title">船舶通航</div>
        <div class="subtitle">
          <div class="name">船舶总体态势分析</div>
          <el-radio-group v-model="radio1" @change="radio1Change">
            <el-radio-button label="当日" value="当日" />
            <el-radio-button label="当周" value="当周" />   
            <el-radio-button label="当月" value="当月" />
            <el-radio-button label="当年" value="当年" />                                            
          </el-radio-group>
        </div>
        <div class="item">
          <div class="count">
            <div class="count-info">
              <div class="count-item" style="margin-bottom: 24px;">
                <div class="name">船舶总数（艘）</div>
                <div class="value">{{ totalShip }}</div>
              </div>
              <div class="count-item">
                <div class="name">船舶总载货吨（万吨）</div>
                <div class="value">{{ totalShipLoad }}</div>
              </div>
            </div>
            <div id="first-chart" style="height: 429px;width: 450px;margin-top: 10px;"></div>
          </div>         
        </div>
        <div class="subtitle">
          <div class="name">船舶流量态势分析</div>
          <el-select
            v-model="count"
            placeholder="请选择"   
            size="small"
            @change="shipllAnalysFn"
            style="width: 200px;"              
          >
            <el-option
              v-for="item in countOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="item">
          <div class="radio-group">
            <el-radio-group v-model="radio2" @change="shipllAnalysFn">
              <el-radio-button label="当日" value="当日" />
              <el-radio-button label="当周" value="当周" />   
              <el-radio-button label="当月" value="当月" />
              <el-radio-button label="当年" value="当年" />                                            
            </el-radio-group> 
          </div>
          <div id="second-chart" style="height: 409px;"></div>
        </div>
        <div class="subtitle">
          <div class="name">观测船舶趋势及预测图</div>     
          <el-select
            v-model="type"
            placeholder="请选择"   
            size="small" 
            style="width: 200px;"         
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>    
        </div>
        <div class="item">
          <div v-show="type === '1'">
            <div class="radio-group">
              <el-radio-group v-model="radio3" @change="shipTrendFn()">
                <el-radio-button label="日" value="日" /> 
                <el-radio-button label="月" value="月" />                                          
              </el-radio-group>   
            </div>
            <div id="third-chart" style="height: 409px;width: 614px;"></div>
          </div>     
          <div v-show="type === '2'">
            <div class="radio-group">
              <el-radio-group v-model="radio4" @change="shipTrendFn()">
                <el-radio-button label="日" value="日" /> 
                <el-radio-button label="月" value="月" />                                          
              </el-radio-group>
            </div>  
            <div id="fourth-chart" style="height: 409px;width: 614px;"></div>
          </div>  
        </div>
      </div>
    </div>
    <!-- 桥梁信息-基本信息 -->
    <el-dialog v-model="baseInfoDialogVisible" title="基本信息" width="640" class="my-dialog">
      <div class="base-info-list">
        <div class="list-item">
          <div class="name">桥梁名称</div>
          <div class="value">{{ bridgeBaseInfoData.bridgeName || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">桥梁类型</div>
          <div class="value">{{ bridgeBaseInfoData.cBridgelx || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">建设单位</div>
          <div class="value">{{ bridgeBaseInfoData.cBridgegldw || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">地理位置</div>
          <div class="value">{{ bridgeBaseInfoData.cAddress || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">所属航道</div>
          <div class="value">{{ bridgeBaseInfoData.cHangdao || "--" }}</div>
        </div>
        <div class="list-item">
          <div class="name">所在航道等级</div>
          <div class="value">{{ bridgeBaseInfoData.hangdaoLevel || "--" }}</div>
        </div>
      </div>
    </el-dialog>
    <!-- 预警情况 -->
    <el-dialog v-model="earlyWarningDialogVisible" title="预警情况" width="1080" class="my-dialog">
      <div class="view-chart">
        <div class="chart">
          <div class="name">偏航统计</div>
          <div id="fifth-chart1"></div>
        </div> 
        <div class="chart">
          <div class="name">超高统计</div>
          <div id="fifth-chart2"></div>
        </div>       
        <div class="chart" style="width: 100%;">
          <div class="name">超速统计</div>
          <div id="fifth-chart3"></div>
        </div>
      </div>
    </el-dialog>
    <!-- 桥区航道-基本信息 -->
    <el-dialog v-model="channelBaseInfoDialogVisible" title="基本信息" width="640" class="my-dialog">
      <div class="base-info-list">
        <div class="list-item">
          <div class="name">所在航道名称</div>
          <div class="value">{{ waterwayBaseInfoData.channelName }}</div>
        </div>
        <div class="list-item">
          <div class="name">距离航道起点里程</div>
          <div class="value">{{ waterwayBaseInfoData.hdMile }}公里</div>
        </div>
        <div class="list-item">
          <div class="name">航道管养单位</div>
          <div class="value">{{ waterwayBaseInfoData.bmPname }}</div>
        </div>
        <div class="list-item">
          <div class="name">航道发展规划技术等级</div>
          <div class="value">{{ waterwayBaseInfoData.jishuLvl }}</div>
        </div>
        <div class="list-item">
          <div class="name">航道现状技术等级</div>
          <div class="value">{{ waterwayBaseInfoData.cWeihudj }}级</div>
        </div>
        <div class="list-item">
          <div class="name">航道维护类别</div>
          <div class="value">{{ waterwayBaseInfoData.weihulb }}</div>
        </div>
        <div class="list-item">
          <div class="name">航标总数</div>
          <div class="value">{{ waterwayBaseInfoData.hbNum }}</div>
        </div>
        <!-- <div class="list-item">
          <div class="name">设标里程</div>
          <div class="value">{{ waterwayBaseInfoData.shebiaoMile }}公里</div>
        </div> -->
        <div class="list-item">
          <div class="name">航标配布类型</div>
          <div class="value">{{ waterwayBaseInfoData.hangbiaopeibuType }}</div>
        </div>
        <!-- <div class="list-item">
          <div class="name">水文站数量</div>
          <div class="value">{{ waterwayBaseInfoData.waterwayStation }}个</div>
        </div> -->
      </div>
    </el-dialog>
    <!-- 桥区航道-水位情况 -->
    <el-dialog v-model="waterLevelDialogVisible" title="水位情况" width="1080" class="my-dialog">
      <div class="water-level-condition">
        <div class="top">
          <el-select
            v-model="water1"
            placeholder="请选择"   
            size="small"  
            @change="water1Change"             
          >
            <el-option
              v-for="item in waterOptions1"
              :key="item.point"
              :label="item.point"
              :value="item.point"
            />
          </el-select>
          <div class="tips">国家1985高程基准</div>
        </div>
        <div class="count">
          <div class="left-part">
            <div class="water-value">实时水位：{{ getNewWaterData?.swz }}米</div>
            <div class="update-time">更新时间：{{ getNewWaterData?.time || "--" }}</div>
          </div>
          <div class="right-part">
            <div class="item" style="border-right: 1px solid #D9D9D9;">
              <div class="water-info">
                <img src="../../assets/images/pc/high-water-icon.png" alt="">
                <div class="name">历史最高水位：</div>
                <div class="value">{{ theHighLowData[0]?.swz?.toFixed(1) || "--" }}米</div>
              </div>
              <div class="time">
                <img src="../../assets/images/pc/time-icon.png" alt="">
                <div>时间：{{ theHighLowData[0]?.time || "--" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="water-info">
                <img src="../../assets/images/pc/low-water-icon.png" alt="">
                <div class="name">历史最低水位：</div>
                <div class="value">{{ theHighLowData[1]?.swz?.toFixed(1) || "--" }}米</div>
              </div>
              <div class="time">
                <img src="../../assets/images/pc/time-icon.png" alt="">
                <div>时间：{{ theHighLowData[1]?.time || "--" }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="line-chart">
          <div class="chart">
            <div class="name">当日水位监测</div>
            <div id="sixth-chart1"></div>
          </div>
          <div class="chart">
            <div class="name">每日八时水位情况</div>
            <div id="sixth-chart2"></div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 巡检情况 -->
    <el-dialog v-model="routingInspectionDialogVisible" title="巡检情况" width="1080" class="my-dialog">
      <div class="routing-inspection">
        <div class="item" style="width: 100%;">
          <div class="name">航标情况</div>
          <div class="count">
            <div class="top-part">
              <div class="top-item br1">
                <div class="top-name">桥航标数</div>
                <div class="value">{{ navigationSituationData.qiaohanbiao || "--" }}</div>
              </div>
              <div class="top-item br1">
                <div class="top-name">桥柱灯数</div>
                <div class="value">{{ navigationSituationData.qiaozhudeng || "--" }}</div>
              </div>
              <div class="top-item br1">
                <div class="top-name">桥区浮标数</div>
                <div class="value">{{ navigationSituationData.fubiao || "--" }}</div>
              </div>
              <div class="top-item">
                <div class="top-name">其他航标数</div>
                <div class="value">{{ navigationSituationData.other || "--" }}</div>
              </div>
            </div>
            <div class="bottom-part">
              <div class="bottom-item br1">
                <div class="bottom-name">在线率</div>
                <div class="value">{{ navigationSituationData.normalRate || "--" }}</div>
              </div>
              <div class="bottom-item">
                <div class="bottom-name">异常数</div>
                <div class="value">{{ navigationSituationData.hangbiaoAbnormal || "--" }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" style="margin-right: 2%;">
          <div class="name">巡查情况</div>
          <div class="info">
            <div class="info-item">
              <div class="info-name">巡查时间：</div>
              <div class="value">{{ xcqkData.xcTime || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">巡查里程数：</div>
              <div class="value">{{ xcqkData.mile || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">总结：</div>
              <div class="value">{{ xcqkData.zongjie || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">障碍物异常：</div>
              <div class="value">{{ xcqkData.zhangaiwuyc || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">出浅异常：</div>
              <div class="value">{{ xcqkData.chugianyc || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">违法情况：</div>
              <div class="value">{{ xcqkData.weifagk || "--" }}</div>
            </div>
            <div class="info-item">
              <div class="info-name">巡查人员：</div>
              <div class="value">{{ xcqkData.xcMenber || "--" }}</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="name">
            <div>巡检记录</div>
            <div class="back" v-show="isShowDetails" @click="isShowDetails = false">
              <img src="../../assets/images/pc/back-icon.png" alt="">
              <div>返回</div>
            </div>
          </div>
          <div class="table" v-show="!isShowDetails">
            <el-table :data="xcjlData">
              <el-table-column prop="cBummc" label="单位名称" />
              <el-table-column prop="nXunhcs" label="巡检次数" />
              <el-table-column prop="xcTime" label="巡检时间" width="160"/>
              <el-table-column prop="mile" label="巡查里程" />
              <el-table-column prop="address" label="操作">
                <template #default="scope">
                  <div class="btn" @click="detailsFn(scope.row)">详情</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="details" v-show="isShowDetails">
            <div class="info">
              <div class="info-item">
                <div class="info-name">巡查时间：</div>
                <div class="value">{{ details.xcTime || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">巡查里程数：</div>
                <div class="value">{{ details.mile || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">总结：</div>
                <div class="value">{{ details.zongjie || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">障碍物异常：</div>
                <div class="value">{{ details.zhangaiwuyc || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">出浅异常：</div>
                <div class="value">{{ details.chugianyc || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">违法情况：</div>
                <div class="value">{{ details.weifagk || "--" }}</div>
              </div>
              <div class="info-item">
                <div class="info-name">巡查人员：</div>
                <div class="value">{{ details.xcMenber || "--" }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 船舶流量 -->
    <el-dialog v-model="shipFlowDialogVisible" title="船舶流量" width="1080" class="my-dialog">
      <div class="view-chart">
        <div class="chart" style="width: 30%;">
          <div class="name">通航情况</div>
          <div id="seventh-chart1"></div>
          <div class="value">{{ seriesData1[0] || "--" }}</div>
        </div>
        <div class="chart" style="width: 30%;">
          <div class="name">各观察点船型统计</div>
          <div id="seventh-chart2"></div>
        </div>
        <div class="chart" style="width: 40%;">
          <div class="name">各观察点月船舶流量分析</div>
          <div id="seventh-chart3"></div>
        </div>
        <div class="chart" style="width: 100%;">
          <div class="name">各观察点月船舶吨位统计</div>
          <div id="seventh-chart4"></div>
        </div>
      </div>
    </el-dialog>
    <!-- 关联桥梁 -->    
    <el-dialog v-model="associatedBridgeDialogVisible" title="关联桥梁" width="640" class="my-dialog">
      <div class="associated-list">
        <div class="item" v-for="(item,index) in associationBgData.bgName" :key="index">
          {{ item }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { useRouter } from "vue-router";
  const router = useRouter();
  import { ElMessage } from 'element-plus';
  //引入Echarts
  import * as echarts from 'echarts/core';
  import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent } from 'echarts/components';
  import { PieChart, BarChart, LineChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

  //引入接口
  import {
    getBridgeList, //获取桥梁
    getBgPic, //获取桥梁图片
    bridgeBaseInfo, //基本信息
    bridgePortrait, //净高是否达标
    bridgeWaterwayRisk, //通航孔
    bgCbmd, //桥区船舶密度
    yawStatistics, //预警情况
    getNewWater, //水位情况
    bgWaterSit, //水位情况
    bgElevation, //设计图纸
    bridgePlan, //一桥一方案

    waterwayBaseInfo, //桥区航道基本信息
    getWaterPoint, //水位情况
    HDtheHighLow, //最高最低水位
    HDrecentOneDay, //当日水位监测
    HDbgRecentWater, //每日八时水位情况
    channelInspection, //巡检情况
    navigationSituation, //航标情况
    hdCbll, //船舶流量
    hdCbllDetail, //船舶流量详情
    associationBg, //关联桥梁
    waterwayNotice, //航道通告

    shipTonAnalys, //船舶总体态势分析
    //船舶流量态势分析
    shipllAnalys,
    shipllAnalysWeek,
    shipllAnalysMonth,
    shipllAnalysYear,
    getCenterByBg, //获取事务中心
    shipTrend, //观测船舶流量、吨位趋势及预测图

    bgModel, //获取桥梁全景
  } from "@/bridge-h5/utils/bridgeAreaControlApi";

  //地图
  import OlArc from "./olArcManage.vue";
  const OlArcRef = ref(null); 

  //获取桥梁
  const bridge = ref("北斗大桥");
  const bridgeOptions = ref([]);
  const waterway = ref("沙湾水道");
  const getBridgeListFn = () => {
    getBridgeList().then((res) => {
      if(res.code === 200){
        bridgeOptions.value = res.data;
        //桥梁信息
        getBgPicFn();
        bridgeBaseInfoFn();
        bridgePortraitFn();
        bridgeWaterwayRiskFn();
        bgCbmdFn();
        yawStatisticsFn();
        getWaterOptionsFn();
        bgElevationFn();
        bridgePlanFn();
        //桥区航道
        waterwayBaseInfoFn();
        getWaterPointFn();
        channelInspectionFn();
        navigationSituationFn();
        hdCbllFn();
        // hdCbllDetailFn();
        associationBgFn();
        waterwayNoticeFn();
        //船舶通航
        shipTonAnalysFn();
        shipllAnalysFn();
        getCenterByBgFn();
        //桥梁全景
        bgModelFn();
      }
    });
  };
  const bridgeChange = () => {
    OlArcRef.value.getPosInfoFn(bridge.value);
    //桥梁信息
    getBgPicFn();
    bridgeBaseInfoFn();
    bridgePortraitFn();
    bridgeWaterwayRiskFn();
    bgCbmdFn();
    yawStatisticsFn();
    getWaterOptionsFn();
    bgElevationFn();
    bridgePlanFn();
    //桥区航道
    bridgeOptions.value.forEach((item) => {
      if(bridge.value === item.name){
        waterway.value = item.hangdao;
        waterwayBaseInfoFn();
        getWaterPointFn();
        channelInspectionFn();
        navigationSituationFn();
        hdCbllFn();
        // hdCbllDetailFn();
        associationBgFn();
        waterwayNoticeFn();
      }
    });
    //船舶通航
    shipTonAnalysFn();
    shipllAnalysFn();
    getCenterByBgFn();
    //桥梁全景
    bgModelFn();
  };
  //获取桥梁图片
  const picUrl = ref("");
  const getBgPicFn = () => {
    getBgPic({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200 && res.data.picUrl){
        picUrl.value = `${import.meta.env.VITE_APP_BASE_API}attach` + res.data.picUrl;
      }else{
        picUrl.value = "";
      }
    });
  };
  const imgError = () => {
    picUrl.value = "";
  };
  //基本信息
  const bridgeBaseInfoData = ref({});
  const bridgeBaseInfoFn = () => {
    bridgeBaseInfo({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bridgeBaseInfoData.value = res.data[0];
      }
    });
  };
  //净高是否达标
  const bridgePortraitData = ref({});
  const bridgePortraitFn = () => {
    bridgePortrait({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bridgePortraitData.value = res.data[0];
      }
    });
  };
  //通航孔
  const bridgeHoleData = ref({});
  const tonghangkong = ref([]);
  const bridgeWaterwayRiskFn = () => {
    bridgeWaterwayRisk({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bridgeHoleData.value = res.data;      
        tonghangkong.value = res.data.tonghangkong;  
      }
    });
  };
  //桥区船舶密度
  const density = ref(0);
  const bgCbmdFn = () => {
    bgCbmd({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        density.value = res.data[0]?.hsCbll;
      }
    });
  };
  //预警情况
  const chaogaoAlarm = ref(0);
  const chaosuAlarm = ref(0);
  const pianhangAlarm = ref(0);
  const yawStatisticsFn = () => {
    yawStatistics({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        chaogaoAlarm.value = res.data.total_num[0].chaogaoAlarm;
        chaosuAlarm.value = res.data.total_num[0].chaosuAlarm;
        pianhangAlarm.value = res.data.total_num[0].pianhangAlarm;

        if(earlyWarningDialogVisible.value){
          initFifthChart1(res.data.pianhang);
          initFifthChart2(res.data.chaogao);
          initFifthChart3(res.data.chaosu);
        }        
      }
    });
  };
  //水位情况
  const water = ref("");
  const waterOptions = ref([]);
  const getWaterOptionsFn = () => {
    getBridgeList({
      keyword: bridge.value
    }).then((res) => {
      if(res.code === 200){
        water.value = res.data[0].name;
        waterOptions.value = res.data;
        getNewWaterFn();
      }
    });
  };
  const newWaterData = ref([]);
  const getNewWaterFn = () => {
    // getNewWater({
    //   waterway: water.value
    // }).then((res) => {
    //   if(res.code === 200 && res.data.length){
    //     newWaterData.value = res.data;
    //   }
    // });
    bgWaterSit({
      bridge: water.value
    }).then((res) => {
      if(res.code === 200 && res.data.length){
        newWaterData.value = res.data;
      }
    });
  };
  //设计图纸/一桥一方案
  const bgElevationFn = () => {
    bgElevation({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200) {

      }
    });
  };
  const planUrl = ref("");
  const bridgePlanFn = () => {
    bridgePlan({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200 && res.data.url) {
        planUrl.value = `${import.meta.env.VITE_APP_BASE_API}` + res.data.url;
      } else {
        planUrl.value = "";
      }
    });
  };
  const viewPlan = () => {
    window.open(
      planUrl.value, 
      "_blank",
      "toolbar=yes,location=yes,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=600,height=600"
    )
  };

  //桥区航道
  const waterwayBaseInfoData = ref({});
  const waterwayBaseInfoFn = () => {
    waterwayBaseInfo({
      bridge: bridge.value,
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        waterwayBaseInfoData.value = res.data;
      }
    });
  };
  const water1 = ref("");
  const waterOptions1 = ref([]);
  const getWaterPointFn = () => {
    getWaterPoint({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200 && res.data.length){
        waterOptions1.value = res.data;
        water1.value = res.data[0].point;
        getNewWaterFn1();
      }else{
        waterOptions1.value = [];
        water1.value = "";
      }
    });
  };
  const getNewWaterData = ref({});
  const getNewWaterFn1 = () => {
    getNewWater({
      waterway: water1.value
    }).then((res) => {
      if(res.code === 200){
        getNewWaterData.value = res.data[0] || {};
      }
    });
  };
  const theHighLowData = ref([]);
  const getHDtheHighLowFn = () => {
    HDtheHighLow({ 
      waterway: water1.value 
    }).then((res) => {
      if (res.code === 200){
        theHighLowData.value = res.data;
      }
    });
  };
  const xcMile = ref(0);
  const xcqkData = ref({});
  const xcjlData = ref([]);  
  const channelInspectionFn = () => {
    channelInspection({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        xcMile.value = res.data.xcMile;
        xcqkData.value = res.data.new;
        xcjlData.value = res.data.list;
      }
    });
  };
  const navigationSituationData = ref({});
  const navigationSituationFn = () => {
    navigationSituation({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        navigationSituationData.value = res.data[0];
      }
    });
  };
  const hdCbllData = ref({});
  const hdCbllFn = () => {
    hdCbll({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        hdCbllData.value = res.data[0] || {};
      }
    });
  };
  const xAxisData1 = ref([]);
  const seriesData1 = ref([]);
  const xAxisData2 = ref(0);
  const seriesData2 = ref(0);
  const xAxisData3 = ref([]);
  const seriesData3 = ref([]);
  const xAxisData4 = ref([]);
  const seriesData4 = ref([]);
  const hdCbllDetailFn = () => {
    shipFlowDialogVisible.value = true;
    hdCbllDetail({ 
      waterway: waterway.value 
    }).then((res) => {
      let data = res.data;
      xAxisData1.value = [];
      seriesData1.value = [];
      xAxisData2.value = 0;
      seriesData2.value = 0;
      xAxisData3.value = [];
      seriesData3.value = [];
      xAxisData4.value = [];
      seriesData4.value = [];      
      if (res.code === 200) {
        xAxisData1.value = [data.bzRate];
        seriesData1.value = [data.thDetail];
        data.cbll?.forEach((item1) => {
          xAxisData1.value.push(item1.ny);
          seriesData1.value.push(item1.temperature);
          xAxisData2.value += item1.dayu;
          seriesData2.value += item1.xiaoyu;
          xAxisData3.value.push(item1.gcdMc);
          seriesData3.value.push(item1.shipNum);
          xAxisData4.value.push(item1.gcdMc);
          seriesData4.value.push(item1.totalDw);
        });
      }
      nextTick(() => {
        initSeventhChart1();
        initSeventhChart2();
        initSeventhChart3();
        initSeventhChart4();
      });
    })
  };
  const associationBgData = ref({});
  const associationBgFn = () => {
    associationBg({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        associationBgData.value = res.data;
      }
    });
  };
  //航道通告
  const waterwayNoticeData = ref([]);
  const waterwayNoticeFn = () => {
    waterwayNotice({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        waterwayNoticeData.value = res.data;
      }
    });    
  };
  const seeNotice = (contents) => {
    let reg =  /<a[^>]+href\s*=\s*['"]([^"']+)['"][^>]*>/gi;   
    if(contents.match(reg)){                 
      window.open(`${import.meta.env.VITE_APP_BASE_API}notice${contents.match(reg)[0].slice(25,-2)}`);        
    }else{
      let matchReg = /<img.*?(?:>|\/>)/gi;
      let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
      let data = [];
      let arr = contents.match(matchReg);
      arr.forEach(item => {
        let src = item.match(srcReg);
        data.push(`${import.meta.env.VITE_APP_BASE_API}notice${src[1]}`);
      });

      router.push({
        path: "/pdf",
        query: { content: data.join(',') },
      });
    }    
  };

  //船舶总体态势分析
  const radio1 = ref("当周");
  const totalShip = ref(0);
  const totalShipLoad = ref(0);
  const shipTonAnalysData = ref({});
  const shipTonAnalysFn = () => {
    shipTonAnalys({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        shipTonAnalysData.value = res.data;
        radio1Change();
      }
    });
  };
  const radio1Change = () => {
    let obj = {};
    if(radio1.value === "当日"){
      totalShip.value = shipTonAnalysData.value.today.totalShip;
      totalShipLoad.value = shipTonAnalysData.value.today.dw;
      obj = shipTonAnalysData.value.today;
    }else if(radio1.value === "当周"){
      totalShip.value = shipTonAnalysData.value.thisWeek.totalShip;
      totalShipLoad.value = shipTonAnalysData.value.thisWeek.dw;
      obj = shipTonAnalysData.value.thisWeek;
    }else if(radio1.value === "当月"){
      totalShip.value = shipTonAnalysData.value.thisMonth.totalShip;
      totalShipLoad.value = shipTonAnalysData.value.thisMonth.dw;
      obj = shipTonAnalysData.value.thisMonth;
    }else if(radio1.value === "当年"){
      totalShip.value = shipTonAnalysData.value.thisYear.totalShip;
      totalShipLoad.value = shipTonAnalysData.value.thisYear.dw;
      obj = shipTonAnalysData.value.thisYear;
    }
    initFirstChart(obj);
  };
  const initFirstChart = (obj) => {
    nextTick(() => {
      let data = [
        { name: '0-500吨', value: obj.ton1, itemStyle: { color: '#0051FF' } },
        { name: '500-1000吨', value: obj.ton2, itemStyle: { color: '#2A8BFD' } },
        { name: '1000-1500吨 ', value: obj.ton3, itemStyle: { color: '#66D88A' } },
        { name: '1500-2000吨', value: obj.ton4, itemStyle: { color: '#CB1EE8' } },
        { name: '2000-3000吨', value: obj.ton5, itemStyle: { color: '#9B58EE' } },
        { name: '3000吨以上', value: obj.ton6, itemStyle: { color: '#FFC733' } },
      ];

      let pieChart = echarts.getInstanceByDom(document.getElementById("first-chart"));
      if(pieChart != null && pieChart != "" && pieChart != undefined){
        pieChart.dispose();
      }
      pieChart = echarts.init(document.getElementById('first-chart'));
      let option = {            
        legend: {   
          type: 'scroll',               
        },    
        tooltip: {
          trigger: 'item',
          confine: true, //限制在图表区域内   
        },     
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,          
            },
            labelLine: {
              show: true, //标签连接线
            },  
            data: data
          }
        ],          
      };
      option && pieChart.setOption(option);
    }); 
  };
  //船舶流量态势分析  
  const count = ref("1");
  const countOptions = [
    { name: "上下行船舶统计", value: "1" },
    { name: "空重载船舶统计", value: "2" },
  ];
  const radio2 = ref("当周");
  const shipllAnalysFn = () => {
    if(radio2.value === "当日"){
      shipllAnalys({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200){          
          initSecondChart(res.data);
        } 
      });
    }else if(radio2.value === "当周"){
      shipllAnalysWeek({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200){          
          initSecondChart(res.data);
        } 
      });
    }else if(radio2.value === "当月"){
      shipllAnalysMonth({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200){          
          initSecondChart(res.data);
        }
      });
    }else if(radio2.value === "当年"){
      shipllAnalysYear({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200){          
          initSecondChart(res.data);
        } 
      });
    }
  }; 
  const initSecondChart = (data) => {
    let xAxisData = [];
    let seriesData1 = [];
    let seriesData2 = [];
       
    data.forEach((item) => {
      xAxisData.push(item.tgsj);
      if(count.value == 1){
        seriesData1.push(item.up);
        seriesData2.push(item.down);
      }else{
        seriesData1.push(item.zhongdai);
        seriesData2.push(item.kongzai);
      }
    });

    let chart = echarts.getInstanceByDom(document.getElementById("second-chart"));
    if(chart != null && chart != "" && chart != undefined){
      chart.dispose();
    }
    chart = echarts.init(document.getElementById('second-chart'));
    let option;
    if(xAxisData.length === 0){
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    }else{
      option = {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: "shadow",
          },
          confine: true, //限制在图表区域内
        },
        legend: {
    
        },
        grid: {
          top: "20%",
          left: "10%",
          right: "15%",
          bottom: "5%",
          containLabel: true,
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            startValue: 0,
            endValue: 6,
            zoomLock: false,
          },
        ],
        xAxis: [
          {
            type: "category",
            name: "",
            data: xAxisData,
            axisTick: {
              alignWithLabel: true, //控制刻度线是否与刻度标签对齐
              show: false, //是否显示刻度线
            },
            axisLabel: {
              interval:0, 
            },
            axisPointer: {
              show: true,
              type: 'none',
              label: {
                show: false,
              },
            },  
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "船舶流量（艘）",
            nameGap: 15,
            axisLabel: {
              interval:0, 
            },
            splitLine: {
              show: true,
            } 
          },
        ],
        series: [
          {
            name: count.value == 1? "上行" : "重载",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            stack: "Ad",
            barWidth: '15%',
            color: "#0051FF",
            data: seriesData1,
          },
          {
            name: count.value == 1? "下行" : "空载",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            stack: "Ad",
            barWidth: '15%',
            color: "#66D88A",
            data: seriesData2,
          },        
        ],
      };
    }

    option && chart.setOption(option);
  };
  //观测船舶趋势及预测图
  const type = ref("1");
  const typeOptions = [
    { name: "观测船舶流量趋势及预测图", value: "1" },
    { name: "观测船舶吨位趋势及预测图", value: "2" },
  ];
  const radio3 = ref("日");
  const radio4 = ref("日");
  const bmpName = ref("");
  const getCenterByBgFn = () => {
    getCenterByBg({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bmpName.value = res.data[0].bmPname;
        shipTrendFn();
      }
    });
  };
  const shipTrendFn = () => {
    shipTrend({
      bridge: bridge.value,
      bmpName: bmpName.value
    }).then((res) => {
      if(res.code === 200){
        initThirdChart(res.data.ship);
        initFourthChart(res.data.tonnage);            
      }
    });
  };
  const initThirdChart = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      if(radio3.value == "日"){
        xAxisData = data.day1;
        seriesData = [
          {
            name: '实际',
            data: data.num,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          },
        ];
      }else if(radio3.value == "月"){
        xAxisData = data.month1.actualMonth;
        seriesData = [
          {
            name: '实际',
            data: data.month1.actual,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          },
          {
            name: '预测值',
            data: data.month1.forcast,
            type: 'line',
            itemStyle: {
              color: '#FFC733'
            },
          }
        ];
      }
      let lineChart = echarts.getInstanceByDom(document.getElementById("third-chart"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('third-chart'));
  
      let option;
      if(xAxisData.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: 800
            }
          }
        };
      }else{
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内
          },
          legend: {

          },
          grid: {
            top: '40px',
            left: '50px',
            right: '15px',
            bottom: '40px',
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              zoomLock: false,
            },
          ],
          xAxis: {
            type: 'category',          
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            name: '单位（万艘）',
            splitLine: {
              show: true,
            } 
          },
          series: seriesData
        };
      }
      option && lineChart.setOption(option);
    });      
  };
  const initFourthChart = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      if(radio4.value == "日"){
        xAxisData = data.day1;
        seriesData = [
          {
            name: '实际',
            data: data.num,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          },
        ];
      }else if(radio4.value == "月"){
        xAxisData = data.month1.actualMonth;
        seriesData = [
          {
            name: '实际',
            data: data.month1.actual,
            type: 'line',
            itemStyle: {
              color: '#0051FF'
            },
          },
          {
            name: '预测值',
            data: data.month1.forcast,
            type: 'line',
            itemStyle: {
              color: '#FFC733'
            },
          }
        ];
      }
      let lineChart = echarts.getInstanceByDom(document.getElementById("fourth-chart"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('fourth-chart'));
  
      let option;
      if(xAxisData.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: 800
            }
          }
        };
      }else{
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内
          },
          legend: {

          },
          grid: {
            top: '40px',
            left: '50px',
            right: '15px',
            bottom: '40px',
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              zoomLock: false,
            },
          ],
          xAxis: {
            type: 'category',          
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            name: '单位（万吨）',
            splitLine: {
              show: true,
            } 
          },
          series: seriesData
        };
      }
      option && lineChart.setOption(option);
    });      
  };

  //弹窗
  const baseInfoDialogVisible = ref(false);
  const earlyWarningDialogVisible = ref(false);
  const initFifthChart1 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.month);
        seriesData.push(item.times);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("fifth-chart1"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('fifth-chart1'));
  
      let option;
      if(xAxisData.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: 800
            }
          }
        };
      }else{
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内
          },
          grid: {
            top: '40px',
            left: '45px',
            right: '15px',
            bottom: '40px',
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              zoomLock: false,
            },
          ],
          xAxis: {
            type: 'category',           
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            name: '船舶数量（艘）',
            splitLine: {
              show: true,
            } 
          },
          series: [
            {
              data: seriesData,
              type: 'line',
              itemStyle: {
                color: '#0051FF'
              },
            }
          ]
        };
      }
      option && lineChart.setOption(option);
    });      
  };
  const initFifthChart2 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.month);
        seriesData.push(item.times);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("fifth-chart2"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('fifth-chart2'));
  
      let option;
      if(xAxisData.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: 800
            }
          }
        };
      }else{
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内
          },
          grid: {
            top: '40px',
            left: '45px',
            right: '15px',
            bottom: '40px',
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              zoomLock: false,
            },
          ],
          xAxis: {
            type: 'category',           
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            name: '船舶数量（艘）',
            splitLine: {
              show: true,
            } 
          },
          series: [
            {
              data: seriesData,
              type: 'line',
              itemStyle: {
                color: '#0051FF'
              },
            }
          ]
        };
      }
      option && lineChart.setOption(option);
    });      
  };
  const initFifthChart3 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.month);
        seriesData.push(item.times);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("fifth-chart3"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('fifth-chart3'));
  
      let option;
      if(xAxisData.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: 800
            }
          }
        };
      }else{
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内
          },
          grid: {
            top: '40px',
            left: '45px',
            right: '15px',
            bottom: '40px',
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              zoomLock: false,
            },
          ],
          xAxis: {
            type: 'category',          
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            name: '船舶数量（艘）',
            splitLine: {
              show: true,
            } 
          },
          series: [
            {
              data: seriesData,
              type: 'line',
              itemStyle: {
                color: '#0051FF'
              },
            }
          ]
        };
      }
      option && lineChart.setOption(option);
    });      
  };
  const channelBaseInfoDialogVisible = ref(false);
  const waterLevelDialogVisible = ref(false);
  const openWaterLevelDialog = () => {
    waterLevelDialogVisible.value = true;
    getNewWaterFn1();
    getHDtheHighLowFn();
    hdRecentOneDayFn();
    hdbgRecentWaterFn();
  };
  const water1Change = () => {
    getNewWaterFn1();
    getHDtheHighLowFn();
    hdRecentOneDayFn();
    hdbgRecentWaterFn();
  };
  const hdRecentOneDayFn = () => {
    HDrecentOneDay({ 
      waterway: water1.value 
    }).then((res) => {
      if (res.code === 200){
        initSixthChart1(res.data);
      }
    });
  };  
  const hdbgRecentWaterFn = () => {
    HDbgRecentWater({ 
      waterway: water1.value 
    }).then((res) => {
      if (res.code === 200){
        initSixthChart2(res.data);
      }
    });
  };
  const initSixthChart1 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.time.slice(11, 16));
        seriesData.push(item.swz);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("sixth-chart1"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('sixth-chart1'));
  
      let option;
      if(xAxisData.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: 800
            }
          }
        };
      }else{
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内
          },
          grid: {
            top: '40px',
            left: '45px',
            right: '15px',
            bottom: '40px',
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              zoomLock: false,
            },
          ],
          xAxis: {
            type: 'category',           
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            name: '水位（m）',
            splitLine: {
              show: true,
            } 
          },
          series: [
            {
              data: seriesData,
              type: 'line',
              itemStyle: {
                color: '#0051FF'
              },
            }
          ]
        };
      }
      option && lineChart.setOption(option);
    }); 
  };
  const initSixthChart2 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.time);
        seriesData.push(item.swz);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("sixth-chart2"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('sixth-chart2'));
  
      let option;
      if(xAxisData.length === 0){
        option = {
          title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 16,
              fontWeight: 800
            }
          }
        };
      }else{
        option = {
          tooltip: {
            trigger: 'axis',
            confine: true, //限制在图表区域内
          },
          grid: {
            top: '40px',
            left: '45px',
            right: '15px',
            bottom: '40px',
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              zoomLock: false,
            },
          ],
          xAxis: {
            type: 'category',           
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            name: '水位（m）',
            splitLine: {
              show: true,
            } 
          },
          series: [
            {
              data: seriesData,
              type: 'line',
              itemStyle: {
                color: '#0051FF'
              },
            }
          ]
        };
      }
      option && lineChart.setOption(option);
    }); 
  };
  const shipFlowDialogVisible = ref(false);
  const echartlist = ref([
    {
      value: 0,
      name: "3000吨以上船舶",
      color: "#0051FF",
    },
    {
      value: 0,
      name: "3000吨以下船舶",
      color: "#66D88A",
    },
  ]);
  const initSeventhChart1 = () => {
    let pieChart = echarts.getInstanceByDom(
      document.getElementById("seventh-chart1")
    );
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById("seventh-chart1"));

    let option;
    let echartlist = [
      {
        value: 100 - xAxisData1.value[0],
        color: "#f1f3f4",
      },
      {
        value: xAxisData1.value[0],
        color: "#0051FF",
      },
    ];
    let color = [
      [
        { offset: 0, color: "#f1f3f4" },
        { offset: 1, color: "#f1f3f4" },
      ],
      [
        { offset: 0, color: "#0051FF" },
        { offset: 1, color: "#0051FF" },
      ],
    ];
    echartlist.forEach((item, index) => {
      item.itemStyle = {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color[index]),
      };
    });
    option = {
      color,
      title: {
        text: "通航保障率",
        subtext: xAxisData1.value[0] + "%" || "0",
        textStyle: {
          color: "#595959",
          fontSize: 12,
          align: "center",
        },
        subtextStyle: {
          fontSize: 21,
          color: "#165DFF",
        },
        x: "center",
        y: "40%",
      },

      tooltip: {
        trigger: "item",
        show: false,
      },
      series: [
        {
          type: "pie",
          minAngle: 5,
          startAngle: 10, //起始角度
          labelLine: {
            show: true,
            length: 20,
            length2: 10,
            lineStyle: {
              width: 2,
            },
          },
          label: {
            show: false,
          },
          center: ["50%", "50%"],
          radius: ["55%", "70%"],
          data: echartlist,
        },
      ],
    };
    option && pieChart.setOption(option);
  };
  const initSeventhChart2 = () => {
    let pieChart = echarts.getInstanceByDom(
      document.getElementById("seventh-chart2")
    );
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById("seventh-chart2"));

    let option;
    echartlist.value = [
      {
        value: xAxisData2.value,
        name: "3000吨以上船舶",
        color: "#0051FF",
      },
      {
        value: seriesData2.value,
        name: "3000吨以下船舶",
        color: "#66D88A",
      },
    ];
    let color = [
      [
        { offset: 0, color: "#0051FF" },
        { offset: 1, color: "#0051FF" },
      ],
      [
        { offset: 0, color: "#66D88A" },
        { offset: 1, color: "#66D88A" },
      ],
    ];
    echartlist.value.forEach((item, index) => {
      item.itemStyle = {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color[index]),
      };
    });
    option = {
      color,
      tooltip: {
        trigger: "item",
        show: true,
      },
      legend: {
        
      },
      series: [
        {
          type: "pie",
          minAngle: 5,
          startAngle: 10, //起始角度
          labelLine: {
            show: true,
            length: 20,
            length2: 10,
            lineStyle: {
              width: 2,
            },
          },
          label: {
            show: false,
          },
          center: ["50%", "50%"],
          radius: ["55%", "70%"],
          data: echartlist.value,
        },
      ],
    };
    option && pieChart.setOption(option);
  };
  const initSeventhChart3 = () => {
    let barChart = echarts.getInstanceByDom(
      document.getElementById("seventh-chart3")
    );
    if (barChart != null && barChart != "" && barChart != undefined) {
      barChart.dispose();
    }
    barChart = echarts.init(document.getElementById("seventh-chart3"));

    let option;
    if(xAxisData3.value.length === 0){
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    }else{
      option = {
        tooltip: {
          trigger: "axis",
          confine: true, //限制在图表区域内
        },
        axisPointer: {
          type: "shadow",
        },
        legend: {
          
        },
        grid: {
          top: "60px",
          left: "45px",
          right: "40px",
          bottom: "55px",
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            startValue: 0,
            endValue: 9,
            zoomLock: false,
          },
        ],
        xAxis: {
          type: "category",
          data: xAxisData3.value,
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          name: '船舶数量（艘）',
        },
        series: [
          {
            name: "船舶数量",
            data: seriesData3.value,
            type: "bar",
            barWidth: 10,
            color: "#0051FF",
          },
        ],
      };
    }
    option && barChart.setOption(option);
  };
  const initSeventhChart4 = () => {
    let barChart = echarts.getInstanceByDom(
      document.getElementById("seventh-chart4")
    );
    if (barChart != null && barChart != "" && barChart != undefined) {
      barChart.dispose();
    }
    barChart = echarts.init(document.getElementById("seventh-chart4"));

    let option;
    if(xAxisData4.value.length === 0){
      option = {
        title: {
          text: "暂无数据",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: 800
          }
        }
      };
    }else{
      option = {
        tooltip: {
          trigger: "axis",
          confine: true, //限制在图表区域内
        },
        axisPointer: {
          type: "shadow",
        },
        legend: {

        },
        grid: {
          top: "60px",
          left: "70px",
          right: "40px",
          bottom: "55px",
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            startValue: 0,
            endValue: 9,
            zoomLock: false,
          },
        ],
        xAxis: {
          type: "category",
          data: xAxisData4.value,
          axisLabel: {
            interval: 0,          
          },
        },
        yAxis: {
          type: "value",
          name: "船舶吨位（吨）"
        },
        series: [
          {
            name: "船舶吨位",
            data: seriesData4.value,
            type: "bar",
            barWidth: 10,
            color: "#0051FF",
          },
        ],
      };
    }
    option && barChart.setOption(option);
  };
  const routingInspectionDialogVisible = ref(false);
  const isShowDetails = ref(false);
  const details = ref({});
  const detailsFn = (row) => {
    details.value = row;
    isShowDetails.value = true;
  };
  const associatedBridgeDialogVisible = ref(false);

  //获取桥梁全景
  const haveLink = ref("");
  const bgModelFn = () => {
    bgModel({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200 && res.data.link){
        haveLink.value = res.data.link;
      }else{
        haveLink.value = "";
      }
    });
  };
  const goLink = () => {
    window.open(haveLink.value);
  };

  onMounted(() => {
    document.title = "水上桥区管控";
    getBridgeListFn();
  });
</script>

<style lang="scss" scoped>
  @font-face{
    font-family: Din;
    src: url("../../assets/fonts/din.ttf");
  }
  @font-face{
    font-family: Tx;
    src: url("../../assets/fonts/tx.ttf");
  }
  .container{    
    width: 2560px;
    height: 1660px;
    box-sizing: content-box;
    .header{
      height: 40px;    
      display: flex;
      align-items: center;  
      justify-content: space-between; 
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
      border-radius: 4px;  
      margin: 16px 16px 0px 16px; 
      padding: 0 16px;
      .title{
        font-family: 'Tx';
        font-weight: 500;
        font-size: 18px;
        color: #262626;
      }
      .menu{
        display: flex;
        align-items: center;
        .item{
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          padding: 6px 18px;
          border-radius: 4px;
        }
        .active{
          color: #FFFFFF;
          background: #0051FF;
        }
      }
    }
    .main{
      box-sizing: content-box;
      height: 1604px;
      margin: 16px;      
      display: flex;
      .left-content{

        width: 614px;
        height: 1572px;          
        box-sizing: content-box;
        background: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
        border-radius: 0px 0px 4px 4px;        
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          font-weight: 500;
          font-size: 18px;
          color: #262626;
          line-height: 48px;
          padding-left: 16px;
        }
        .subtitle{
          height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          border-bottom: 1px solid #F0F0F0;
          .name{
            font-weight: 500;
            font-size: 16px;
            color: #262626;
          }
          .more{
            font-weight: 400;
            font-size: 16px;
            color: #0051FF;
          }
        }
        .image{
          height: 314px;
          box-sizing: content-box;
          margin: 8px 16px;   
          position: relative;
          img{
            width: 100%;
            height: 100%;
          }
          .no-image{
            height: 314px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
              width: 68px;
              height: 68px;
            }
            .name{
              font-weight: 500;
              font-size: 16px;
              color: #262626;
              margin-top: 8px;
            }
          }
          .btn{
            text-align: center;
            font-weight: 400;
            font-size: 16px;
            padding: 4px 8px;
            border-radius: 4px;
            color: #FFFFFF;
            background: #0051FF;
            position: absolute;
            top: 0px;
            right: 0px;
          }
        }
        .base-info{ 
          height: 100px;         
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0px 16px;     
          .left-info{
            .name{
              font-weight: 600;
              font-size: 18px;
              color: #262626;
            }
            .address{
              font-weight: 500;
              font-size: 16px;
              color: #595959;
              display: flex;
              align-items: center;
              .text{
                font-weight: 400;
                font-size: 16px;
                color: #595959;
              }
              .value{
                font-weight: 500;
                font-size: 16px;
                color: #262626;
              }
            }
          }
          .right-info{
            display: flex;
            align-items: center;
            .name{
              font-weight: 400;
              font-size: 16px;
              color: #595959;
            }
            .value{
              font-weight: 500;
              font-size: 16px;
              color: #28CE8E;
            }
          }
        }
        .hole-info{
          height: 384px;
          margin: 0px 16px;
          .hole-item{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
            padding: 32px 0;
            font-size: 16px;
            .name{
              color: #595959;
            }
            .value{
              font-family: 'Din';
              font-weight: bold;              
              color: #262626;
            }
          }
        }
        .count-info{
          display: flex;
          margin: 16px;
          .count-item{
            height: 136px;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
            border-radius: 4px;
            border: 1px solid #F0F0F0;
            .top{
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;      
              border-bottom: 1px solid #f0f0f0;        
              .name{
                font-weight: 500;
                font-size: 16px;
                color: #262626;
              }
              .more{
                font-weight: 400;
                font-size: 16px;
                color: #0051FF;
              }
            }
            .bottom{
              height: 95px;
              display: flex;    
              justify-content: center;
              align-items: center;
              .bottom-item{
                text-align: center;
                .value{
                  font-family: 'Din';
                  font-size: 16px;
                  font-weight: bold;
                  color: #F13939;
                  margin-top: 4px;
                }
                .name{
                  font-weight: 400;
                  font-size: 16px;
                  color: #262626;
                }
              }   
              .w33{
                width: 33.33%;
              }    
              .br1{
                border-right: 1px solid #f0f0f0;
              }   
            }
          }      
        }
        .water-info{
          height: 239px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          background: #F8F9FB;
          margin: 8px 16px 16px 16px;
          .water-level{
            color: #0051FF;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
            .value{
              font-family: 'Din';
            }
          }
          .tips{
            font-weight: 400;
            font-size: 16px;
            color: #595959;
          }
          .update-time{
            font-weight: 400;
            font-size: 16px;
            color: #595959;
          }
        }
        .blueprint{
          display: flex; 
          margin: 0 16px;        
          .blueprint-item{
            width: 50%;            
            height: 44px;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
            border-radius: 4px;
            border: 1px solid #F0F0F0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
              display: flex;
              align-items: center;
              margin-left: 16px;
              div{                
                font-weight: 500;
                font-size: 18px;
                color: #262626;
                margin-left: 4px;
              }
            }
          }
        }
      }
      .middle-content{
        width: 1268px;   
        height: 1572px; 
        margin: 0 16px;
        box-sizing: content-box;
        position: relative;
        .map{
          height: 718px;
          margin-bottom: 16px;
          position: relative;
          .choose{
            position: absolute;
            top: 16px;
            left: 16px;
          }
        }
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          font-weight: 500;
          font-size: 18px;
          color: #262626;
          line-height: 48px;
          padding-left: 16px;
        }
        .info{
          height: 464px;
          background: #FFFFFF;
          box-shadow: inset 0px -1px 0px 0px #F0F0F0;
          border-radius: 0px 0px 4px 4px;
          box-sizing: content-box;
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 16px;          
          .info-item{
            width: 399px;
            height: 210px;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
            border-radius: 4px;
            border: 1px solid #F0F0F0;
            .item-title{
              height: 40px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 16px;
              border-bottom: 1px solid #F0F0F0;
              .name{
                font-weight: 500;
                font-size: 16px;
                color: #262626;
              }
              .more{
                font-weight: 400;
                font-size: 16px;
                color: #0051FF;
              }
              .point{
                width: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                background: #0051FF;
                border-radius: 4px;
                color: #FFFFFF;
                padding: 5px 13px;
              }
            }
            .first-info{
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin: 40px 32px 4px 32px;
              .top{
                display: flex; 
                justify-content: space-between; 
                margin-bottom: 4px;
                font-weight: 600;
                font-size: 24px;
                color: #0051FF;            
              }
              .bottom{
                text-align: center;
                font-weight: 400;
                font-size: 16px;
                color: #595959;
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 16px;
                  color: #262626;
                }
              }
            }
            .second-info{
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 40px 16px;
              .name{
                font-weight: 400;
                font-size: 16px;
                color: #262626;
              }
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 20px;
                color: #0051FF;
              }
            }
            .third-info{
              margin-top: 40px;
              .water-level{
                font-family: 'Din';
                font-weight: 600;
                font-size: 24px;
                color: #0051FF;
                text-align: center;
                margin-top: 8px;
              }
              .tips{
                display: flex;
                justify-content: space-around;
                font-weight: 400;
                font-size: 16px;
                color: #595959;
                margin-top: 4px;
              }
            }
            .fourth-info{
              display: flex;
              justify-content: center;
              margin-top: 40px;
              .name{
                font-weight: 600;
                font-size: 22px;
                color: #333333;
              }
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 22px;
                color: #0051FF;
              }
            }
            .fifth-info{
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 40px 26px;
              .name{
                font-weight: 400;
                font-size: 16px;
                color: #262626;
              }
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 20px;
                color: #0051FF;
              }
            }
            .sixth-info{
              display: flex;
              justify-content: center;
              margin: 40px 0px 40px 0px;
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 24px;
                color: #0051FF;
              }
            }
          }
        }
        .notice-list{
          height: 262px;          
          overflow-y: auto;
          background: #FFFFFF;
          box-shadow: inset 0px -1px 0px 0px #F0F0F0;
          border-radius: 0px 0px 4px 4px;
          .notice-item{
            font-weight: 400;
            font-size: 16px;
            color: #262626;
            padding: 16px 0;
            margin: 0 16px;
            border-bottom: 1px solid #F0F0F0;
          }
          .no-list{
            text-align: center;
            line-height: 262px;
            font-weight: 400;
            font-size: 16px;
            color: #262626;
          }
        }
      }
      .right-content{
        width: 614px;
        height: 1572px;        
        box-sizing: content-box; 
        background: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
        border-radius: 0px 0px 4px 4px; 
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          font-weight: 500;
          font-size: 18px;
          color: #262626;
          line-height: 48px;
          padding-left: 16px;
        }
        .subtitle{
          height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          border-bottom: 1px solid #F0F0F0;
          .name{
            font-weight: 500;
            font-size: 16px;
            color: #262626;
          }
        }
        .item{
          height: 459px;
          .count{
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 16px;
            .count-info{
              width: 40%;
              margin-left: 30px;
              .count-item{
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-right: 24px;
                .name{
                  font-weight: 400;
                  font-size: 16px;
                  color: #262626;
                }
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 24px;
                  color: #262626;
                }
              }
            }
          }
          .radio-group{
            height: 50px;            
            line-height: 50px;
            text-align: center;
          }
        }
      }
    }
    .my-dialog{
      .base-info-list{
        .list-item{
          display: flex;
          justify-content: space-between;
          padding: 16px 0;
          border-bottom: 1px solid #f0f0f0;
        }
      }
      .view-chart{
        display: flex;
        flex-wrap: wrap;
        margin-top: 8px;
        .chart{
          box-sizing: border-box;
          width: 50%;   
          position: relative;
          .name{
            font-weight: 500;
            font-size: 16px;
            color: #262626;
            position: relative;
            padding-left: 16px;   
          }     
          .name::before{
            content: '';
            background-color: #0051FF;
            position: absolute;
            top: 55%;
            left: 0;
            height: 16px;
            width: 4px;
            transform: translateY(-50%);
          } 
          .value{
            font-weight: 500;
            font-size: 16px;
            color: #28CE8E;
            position: absolute;
            left: 130px;
            bottom: 10px;
          }
          #fifth-chart1,#fifth-chart2,#fifth-chart3,
          #seventh-chart1,#seventh-chart2,#seventh-chart3,#seventh-chart4
          {
            height: 240px;
          }
        }
      }   
      .water-level-condition{
        .top{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 8px;
          .tips{
            font-weight: 400;
            font-size: 16px;
            color: #595959;
          }
        }
        .count{
          display: flex;
          margin: 16px 0;
          .left-part{
            width: 338px;
            height: 94px;
            background: #F8F9FB;
            margin-right: 16px;
            .water-value{
              font-family: 'Din';
              font-weight: bold;
              font-size: 24px;
              color: #0051FF;
              text-align: center;
              margin-top: 17px;
            }
            .update-time{
              font-weight: 400;
              font-size: 16px;
              color: #595959;
              text-align: center;
              margin-top: 8px;
            }
          }
          .right-part{
            width: 678px;
            height: 94px;
            background: #F8F9FB;
            display: flex;
            .item{
              width: 50%;
              margin: 16px 0;
              .water-info{
                display: flex;
                align-items: center;
                margin: 0px 0px 8px 16px;
                img{
                  width: 24px;
                  height: 24px;
                  padding-right: 4px;
                }
                .name{
                  font-weight: 500;
                  font-size: 24px;
                  color: #262626;
                }
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 24px;
                  color: #0051FF;
                }
              }
              .time{
                display: flex;
                align-items: center;
                font-weight: 400;
                font-size: 16px;
                color: #595959;
                margin-left: 16px;
                img{
                  padding-right: 4px;
                }
              }
            }
          }
        }
        .line-chart{
          display: flex;
          .chart{
            width: 50%;
            .name{
              font-weight: 500;
              font-size: 16px;
              color: #262626;
              position: relative;
              padding-left: 16px;   
            }     
            .name::before{
              content: '';
              background-color: #0051FF;
              position: absolute;
              top: 55%;
              left: 0;
              height: 16px;
              width: 4px;
              transform: translateY(-50%);
            } 
            #sixth-chart1,#sixth-chart2{
              height: 240px;
            }
          }
        }
      }
      .routing-inspection{
        display: flex;
        flex-wrap: wrap;
        margin-top: 8px;
        box-sizing: content-box;
        .item{
          width: 49%;
          padding: 16px;
          border-radius: 4px;
          border: 1px solid #F0F0F0;
          box-sizing: border-box;
          margin-bottom: 16px;
          .name{
            font-weight: 500;
            font-size: 16px;
            color: #262626;
            position: relative;
            padding-left: 16px;   
            display: flex;
            align-items: center;
            justify-content: space-between;
            .back{
              display: flex;
              align-items: center;
              border-radius: 4px;
              border: 1px solid #0051FF;
              font-weight: 400;
              font-size: 16px;
              color: #0051FF;
              padding: 4px 16px;
              img{
                padding-right: 4px;
              }
            }
          }     
          .name::before{
            content: '';
            background-color: #0051FF;
            position: absolute;
            top: 55%;
            left: 0;
            height: 16px;
            width: 4px;
            transform: translateY(-50%);
          }
          .count{           
            .top-part{
              display: flex;
              background: #F8F9FB;
              padding: 16px 0;
              margin: 8px 0;
              .top-item{
                width: 25%;
                padding-left: 16px;
                .top-name{
                  font-weight: 400;
                  font-size: 16px;
                  color: #262626;
                }
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 24px;
                  color: #0051FF;
                }
              }
              .br1{
                border-right: 1px solid #D9D9D9;
              }
            }           
            .bottom-part{
              display: flex;
              background: #F8F9FB;
              padding: 18px 0;
              margin-bottom: 8px;
              .bottom-item{
                width: 50%;
                display: flex;
                align-items: center;
                padding-left: 16px;
                .name{
                  font-weight: 400;
                  font-size: 16px;
                  color: #262626;
                }
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 24px;
                  color: #28CE8E;
                  padding-left: 40px;
                }
              }
              .br1{
                border-right: 1px solid #D9D9D9;
              }
            }
          } 
          .info{
            margin-top: 8px;
            .info-item{
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              .info-name{
                font-weight: 400;
                font-size: 16px;
                color: #262626;
              }
              .value{
                font-weight: 400;
                font-size: 16px;
                color: #595959;
              }
            }
          }
          .table{
            .btn{
              font-weight: 400;
              font-size: 16px;
              color: #165DFF;
            }
          }
        }
      }
      .associated-list{
        margin: 8px 0;
        .item{
          background: #F8F9FB;
          border-radius: 4px;
          padding: 8px;
          margin-bottom: 16px;
        }
      }
    }
  }
  :deep(.el-dialog__header){
    border-bottom: 1px solid #f0f0f0;
  }
</style>